<template>
  <div>
    Foo
    <Bar ref="bar" title="this is a bar" @call-parent="handleCallParent"></Bar>

    <button ref="btn" @click="handleGetBar">get Bar</button>
    <button @click="getChildren">get children</button>
  </div>
</template>

<script>
import Bar from "./Bar";
export default {
  components: {
    Bar,
  },

  methods: {
      getName(){
          console.log("foo")

      },
    getChildren() {
      // 通信的本质  就是要获取到组件
      console.log(this.$children);
      // 命名 $
      // vue
      // $ 开头 是public 公开的方法 -》 api -> 可以调用它
      // _ 开头 是 private 不公开的方法 -》 推荐不要去使用
      this.$children[0].setTitle("use get bar set");
    },
    handleGetBar() {
      console.log(this.$refs);
      //   this.$refs.bar.setTitle("use get bar set");
    },
    handleCallParent() {
      console.log("parent - foo");
    },
  },
};
</script>

<style></style>
